<template>
  <!-- <RouterView /> -->
  <router-view v-slot="{ Component }">
    <keep-alive :include="include">
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <!-- 底部菜单 -->
  <bottomMenu />
  <!-- 开启底部安全区适配 -->
  <van-number-keyboard safe-area-inset-bottom />

  <!-- 分享 -->
  <van-popup
    v-model:show="showPicker"
    round
    position="bottom">
    <van-picker
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm" />
  </van-popup>
</template>

<script setup lang="ts">
import { keepAliveStore } from '@/stores/modules/keep-alive';
import { provide, ref } from 'vue';
const { include } = keepAliveStore();

const showPicker = ref(false);

const a = ref();
const a = ref();
// 分享
const share = () => {
  showPicker.value = true;
};

const columns = [
  { text: '发送给朋友', value: 'friend' },
  { text: '生成海报', value: 'poster' }
];
provide('share', share);

const onConfirm = (e) => {
  console.log(e);
};
</script>

<style>
@supports (bottom: env(safe-area-inset-bottom)) {
  #app {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 0;
    width: 750px;
    padding-bottom: 100px;
  }
}
</style>
